import '../static/css/index.css'
import { Outlet, useNavigate } from 'react-router';
import React, { useState } from 'react';
// 访客
import type { MenuProps } from 'antd';
import { Menu, Layout, Popconfirm, Tag } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    SettingFilled,
    MailOutlined,
    FullscreenOutlined,
    CaretDownOutlined,
    DashboardFilled,
    LockFilled,
    AppstoreFilled,
    CarryOutFilled,
    ChromeFilled,
    SignalFilled
} from '@ant-design/icons';


// 标签
const log = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
};
// 标签
const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
    e.preventDefault();
    console.log('Clicked! But prevent default.');
};
const Index: React.FC = () => {
    type MenuItem = Required<MenuProps>['items'][number];
    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children ?: MenuItem[],
        type?: 'group',
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
            type,
        } as MenuItem;
    }
    const navigate = useNavigate()
    const items: MenuItem[] = [
        getItem('首页', '/index', <DashboardFilled />),

        getItem('访客记录', 'sub1', <MailOutlined />, [
            getItem('访客列表', '/table/list'),
            getItem('访客添加修改', '/table/add'),
            getItem('负责人操作导入详细', '/table/detailed'),
        ]),

        getItem('部门管理', 'department',<SignalFilled />, [
            getItem('部门列表', '/department/list'),
            getItem('部门添加修改', '/department/add_upd'),
        ]),
        getItem('管理员', 'Admin', <LockFilled />, [
            getItem('管理员列表', '/Admin/Adlist'),
            getItem('管理员添加修改', '/Admin/Adadd'),  
        ]),
        getItem('核销人员管理', 'writeoff', <ChromeFilled />, [
            getItem('核销人员列表', '/writeoff/WrieoffList'),
            getItem('核销人员添加修改', '/writeoff/WrieoffAdd'),
            getItem('核销人员日志', '/writeoff/WrieoffJournal'),
        ]),
        getItem('审核日志', 'audit', <CarryOutFilled />, [
            getItem('审核列表', '/audit/list'),
        ]),
        getItem('校园动态', 'school', <AppstoreFilled />, [
            getItem('校园动态列表', '/school/list'),
            getItem('校园动态添加修改', '/school/add_upd'),
        ]),
        getItem('系统设置', '/sty/System', <SettingFilled />),
    ];
    const [collapsed, setCollapsed] = useState(false);
    const { Header, Sider, Content } = Layout;
    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };
    return (
        <div className='box'>
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo" />
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['1']}
                        mode="inline"
                        theme="dark"
                        items={items}
                        onSelect={(item) => {
                            navigate(item.keyPath[0])
                        }}
                    />
                    <Menu
                        theme="dark"
                        mode="inline"
                        defaultSelectedKeys={['1']}
                    />
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        <div className='big_box'>
                            <div className='boxx'>
                                <div className='ww'>
                                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                        className: 'trigger',
                                        onClick: () => setCollapsed(!collapsed),
                                    })}
                                    
                                </div>
                                <div className='font'>
                                    <FullscreenOutlined />
                                    <Popconfirm title="Are you sure?" okText="Yes" cancelText="No" className='f2'>
                                        <span className='f1'>admin</span>
                                        <span className='f'><CaretDownOutlined /></span>
                                    </Popconfirm>
                                </div>
                            </div>
                            <div className='label'>
                                <Tag >首页</Tag>
                            </div>
                        </div>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            // margin: '24px 16px',
                            // padding: 10,
                            minHeight: 280,
                        }}
                    >
                        <Outlet></Outlet>
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}
export default Index